import React from 'react';
import { func, object } from 'prop-types';
import { Switch, Route } from 'react-router-dom';
// import { Container } from 'reactstrap';
import { Layout } from 'antd';
import { connect } from 'react-redux';

import Navbar from '../containers/Navbar';
import Footer from '../components/Footer';
import AsyncLoad from '../components/AsyncLoad';
import { signOutWithCb } from '../store/fakeAuth';

export const AsyncAttract = AsyncLoad({
  //景点
  loader: () =>
    import(/* webpackChunkName: "zen" */ '../containers/Attractions.js')
});
export const AsyncShow = AsyncLoad({
  //演出
  loader: () => import('../containers/Show.js')
});
export const AsyncContest = AsyncLoad({
  //比赛
  loader: () => import('../containers/Contest.js')
});
export const AsyncLocal = AsyncLoad({
  //体验
  loader: () => import('../containers/Local.js')
});
export const AsyncSearch = AsyncLoad({
  //搜索结果
  loader: () => import('../containers/Search.js')
});
export const AsyncDetail = AsyncLoad({
  //详情页
  loader: () => import('../containers/Detail.js')
});
export const AsyncUser = AsyncLoad({
  //个人中心
  loader: () => import('./User.js')
});

const AsyncHome = AsyncLoad({
  loader: () => import(/* webpackChunkName: "home" */ '../containers/Home.js')
});

const propTypes = {
  signOut: func.isRequired
};
const contextTypes = { theme: object.isRequired };

export function CustomHome({ signOut }, context) {
  const { theme } = context;
  // const minHeight = window.innerHeight;
  const rootStyles = theme.prefixStyle({
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
    // minHeight:minHeight,
  });
  const height = window.innerHeight;
  const minHeight =
    window.innerHeight - (window.innerWidth * (279 + 80)) / 1920; //279 footer 80 header
  return (
    <div style={rootStyles} id="page">
      <Navbar signOut={signOut} />
      <div style={{ minHeight: minHeight }}>
        <Switch>
          <Route exact path="/" component={AsyncHome} />
          <Route exact path="/attractions" component={AsyncAttract} />
          <Route exact path="/show" component={AsyncShow} />
          <Route exact path="/contest" component={AsyncContest} />
          <Route exact path="/local" component={AsyncLocal} />
          <Route exact path="/search" component={AsyncSearch} />
          <Route path="/:name/detail" component={AsyncDetail} />
          <Route path="/user" component={AsyncUser} />
        </Switch>
      </div>
      <Footer />
    </div>
  );
}

CustomHome.propTypes = propTypes;
CustomHome.contextTypes = contextTypes;
const mapStateToProps = state => ({});
const mapDispatchToProps = {
  signOut: signOutWithCb
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CustomHome);
